---
import Perme from './perme.astro'
import Edu from './education.astro'
import Exper from './experience.astro'
import Skill from './skill.astro'
import ProjectCard from "./card.astro";

const response = await fetch("http://localhost:9901/api/getProjects");
const data = await response.json();
---
<div class="container">
  <!-- 个人信息 -->
  <Perme />

  <!-- 教育经历 -->
  <Edu />

  <!-- 技能 -->
  <Skill />

  <!-- 工作经验 -->
  <!-- <Exper /> -->

  <!-- 项目 -->
  {data.map((p, index) => <ProjectCard
    post = { p }
    colorIndex = {index+1}
  />)}

</div>

<style>
  .container {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
  }
</style>
